<script setup lang="ts">
import { useStore } from '@/stores/user';
import { ref, watch } from 'vue';
import type { Ref } from 'vue';


import { useRouter } from 'vue-router';
const router = useRouter()

const store = useStore()
const username: Ref<string> = ref('')
const messageerr: Ref<string> = ref('')
const disabled: Ref<boolean> = ref(true)



watch(username, () => {
    if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(username.value)) {
        disabled.value = false
    } else {
        messageerr.value = '请填写正确手机号'
    }
})

function pwdClick() {

    store.changStore({
        username: username.value,
        userid: store.userid,
        userflog: false
    })
    router.push('/register/path2')

}


</script>


<template>
    <div class="navtop">
        <van-nav-bar left-arrow @click-left="$router.back()" z-index="99" fixed :border="false" placeholder
            safe-area-inset-top />
        <div class="registerBox">

            <div class="titlebox">
                <h1>忘记密码</h1>
                <p>请输入您的手机号，以便找回您的密码</p>

            </div>
            <main class="container">
                <van-cell-group inset>
                    <van-field center v-model="username" name="手机号" placeholder="输入手机号"
                        :rules="[{ required: true, message: '请输入手机号' }]" :error-message="messageerr" />
                </van-cell-group>

            </main>


            <footer>
                <van-button :disabled="disabled" @click="pwdClick" block type="primary">
                    下一步
                </van-button>
            </footer>

        </div>
    </div>
</template>


<style lang="scss" scoped>
.navtop {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    --van-nav-bar-background: rgbr(0, 0, 0, 0);
}

.registerBox {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .titlebox {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: left;
        margin-top: 20%;
        margin-bottom: 10px;

        h1 {
            // font-size: 40px;
            font-weight: 400;
            margin: 0;
        }

        p {
            color: #616161;
        }

        .teltext {
            font-size: 0.2rem;
            color: #0b0b0b;

        }

    }

    .container {
        width: 80%;

        .van-password-input {

            --van-password-input-height: 50px;

            :deep(.van-password-input__item) {
                border: 0.25px solid #d7d7d7;
                height: 50px;
                width: 50px;
            }
        }
    }

    .van-cell-group {
        margin: 0;
        margin-bottom: 20px;
        // height: 50px;
    }

    .wpsd {
        position: relative;
        left: 240px;
    }

    footer {
        width: 80%;
        height: 50%;
        margin: 30px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            font-size: 0.15rem;
            color: #a2a2a2;
            font-weight: 700;
            word-spacing: 10px;
            margin-top: 20px;
        }
    }

}
</style>